<template>
    <v-container>
        <v-layout column>
            <v-flex>
                <v-sheet tile class="mx-auto" color="orange" pl-5>
                    <v-switch color="primary" label="首字母"></v-switch>
                    <v-switch color="primary" label="大写"></v-switch>
                    <!--                    示例-->
                    <v-switch color="primary" label=""></v-switch>
                </v-sheet>
            </v-flex>
            <v-flex mt-5>
                <v-layout justify-space-around>
                    <v-flex xl5 mr-2>
                        <v-textarea placeholder="输入中文" auto-grow clearable rows="10" solo v-model.trim="words"></v-textarea>
                    </v-flex>
                    <v-flex xl5 ml-2>
                        <v-sheet tile color="primary">
                            <div ref="trans"></div>
                        </v-sheet>
                        <copy-button :content="transferred"></copy-button>
                    </v-flex>
                </v-layout>
            </v-flex>
        </v-layout>
    </v-container>
</template>

<script>
    import cn from 'cnchar'
    import CopyButton from "../../../components/CopyButton";

    export default {
        name: 'WordTransfer',
        components: {
            CopyButton
        },
        data: () => ({
            params: [],
            words: ''
        }),
        methods: {
            getFirstLetters() {
                console.log(cn.spell('赵悦丞'));
                console.log(cn.spell('赵悦丞', 'up'));
                console.log(cn.spell('赵悦丞', 'low'));
                console.log(cn.spell('赵悦丞', 'first'));
                console.log(cn.spell('赵悦丞', 'first', 'low'));
                console.log(cn.spell('赵悦丞', 'first', 'up'));
                console.log(cn.spell('赵悦丞', 'array'));
                console.log(cn.spell('赵悦丞', 'array', 'first'));
                console.log(cn.spell('赵悦丞', 'array', 'first', 'low'));
                console.log(cn.spell('赵悦丞', 'array', 'first', 'up'));
            }
        },
        computed: {
            transferred() {
                const result = this.words + '<br>transfered';
                // console.log(this.$refs.trans);
                // this.$refs.trans.innerHTML = result;
                return result;
            }
        },
        mounted() {
            // console.log(this.$refs['trans']);
            this.$nextTick(() => {
                console.log('nextTick', this.$refs.trans);
            });
        }
    }
</script>

<style scoped>
</style>
